<template>
	<view>
		<view class="editspectator-container">
			<view class="editspectator-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="backSpectator()"></uni-icons>
				</view>
				<!-- #endif -->
				<view class="title">
					{{title}}
				</view>
			</view>
			<view class="editspectator-content">
				<view class="spectator-box">
					<view class="spectator-box-content">
						<view class="spectator-item">
							<view class="spectator-text">
								姓名
							</view>
							<input class="spectator-item-input" placeholder="请填写观演人姓名" type="text"
								v-model="formData.name" />
						</view>
						<view class="spectator-item" @click="open">
							<view class="spectator-text">
								证件类型
							</view>
							<view class="like-input-view">
								{{formData.idType}}
							</view>
							<view class="right-icon">
								<uni-icons class="arrow-right" color="#999" type="right" size="18"></uni-icons>
							</view>
						</view>
						<view class="spectator-item">
							<view class="spectator-text">
								证件号码
							</view>
							<input class="spectator-item-input" placeholder="请填写真实有效的证件号码" type="text"
								v-model="formData.idNumber" />
						</view>
						<view class="spectator-item">
							<view class="spectator-text">
								手机号
							</view>
							<input class="spectator-item-input" placeholder="请填写手机号" type="text"
								v-model="formData.phone" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="messageRef" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popup" border-radius="10px 10px 0 0">
			<view class="id-type-box">
				<view class="id-type-title">
					<view class="id-type-title-text">
						证件类型
					</view>
					<view class="id-type-title-descr">
						请选择证件类型
					</view>
					<view class="id-close">
						<uni-icons class="id-close-icon" color="#999" type="closeempty" size="30"
							@click="close()"></uni-icons>
					</view>
				</view>
				<view class="id-type-list">
					<view class="id-type-item" v-for="(item, index) in idTypedata" :key="index">
						<view class="id-type-item-name" @click="choice(item.typeName)">
							{{item.typeName}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>


		<view class="save-btn-box">
			<view class="save-btn" @click="saveSpectatorInfo()">
				保存
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted,
		watch,
		watchEffect,
		onBeforeMount
	} from 'vue';
	import {
		sharedState
	} from '@/common/store.js';
	import {
		onShow,
		onHide,
		onUnload,
		onLoad
	} from '@dcloudio/uni-app';
	//消息提示类型
	const msgType = ref('success');
	//消息提示窗初始化
	const messageText = ref(null);
	//绑定消息提示窗
	const messageRef = ref(null);
	//初始化要缓存本地的观演人数组
	let spectatorList = ref([]);
	//初始化观演人
	let formData = ref({
		userId: 0,
		name: "",
		idType: "请选择证件类型",
		idNumber: "",
		phone: ""
	});

	const updateFormData = ref(null);
	/**
	 * 通过id获取需要更新的观演人的信息
	 */

	let getSpectatorFromId = () => {
		const id = sharedState.value;
		const userId = formData.value.userId;
		// const queryData = {
		// 	id: sharedState.value,
		// 	userId:formData.value.userId
		// }
		uni.request({
			url: `/st/audience/${id}`,
			method: 'GET',
			success: (res) => {
				console.log(res.data);
				if (res.data.code == 2000) {
					formData.value.name = res.data.data.name;
					formData.value.idType = res.data.data.idType;
					formData.value.idNumber = res.data.data.idNumber;
					formData.value.phone = res.data.data.phone;
					updateFormData.value = res.data.data;
				}
			},
			fail: () => {

			},
		})
		
	}


	//更新观演人的信息

	//保存观演人信息
	let saveSpectatorInfo = () => {
		if (
			!formData.value.name ||
			formData.value.idType === "请选择证件类型" ||
			!formData.value.idNumber ||
			!formData.value.phone
		) {
			console.log("错误")
			msgType.value = 'error';
			messageText.value = '请填写完整数据';
			messageToggle('error');
		} else {
			if (sharedState.value != null) {
				updateFormData.value.name = formData.value.name;
				updateFormData.value.idType = formData.value.idType;
				updateFormData.value.idNumber = formData.value.idNumber;
				updateFormData.value.phone = formData.value.phone;
				uni.request({
					url: "/st/audience/update",
					data: updateFormData.value,
					method: 'PUT',
					success: (res) => {
						console.log(res.data);
						uni.redirectTo({
							url: "/pages/spectator/spectator"
						})
					},
					fail: () => {

					},
				})
			} else {
				uni.request({
					url: '/st/audience/add',
					method: 'POST',
					data: formData.value,
					success: (res) => {
						if (res.data.code == 200) {
							uni.redirectTo({
								url: "/pages/spectator/spectator"
							})
						} else {
							console.log("错误")
							msgType.value = 'error';
							messageText.value = '格式不正确，请重新输入';
							messageToggle('error');
						}
					},
					fail: () => {

					}
				})
			}

		}



	};


	const messageToggle = (typeValue) => {
		if (messageRef.value) {
			messageRef.value.open(); // 使用 messageRef 打开提示框
		} else {
			console.warn('messageRef is not yet available'); // 添加日志输出
		}
	};
	const dialogToggle = (typeValue) => {
		msgType.value = typeValue;
		alertDialogRef.value.open();

	};

	let title = ref("新建观演人信息");

	const idTypeText = ref("请选择观演人证件类型");
	const idTypedata = ref([{
			typeName: "身份证"
		},
		{
			typeName: "台湾通行证"
		},
		{
			typeName: "港澳通行证"
		},
		{
			typeName: "护照"
		}
	]);

	const backSpectator = () => {
		console.log('backSpectator called');
		uni.navigateBack({
			delta: 1,
			success: () => {
				console.log('navigateBack success');
			},
			fail: (err) => {
				console.error('navigateBack failed', err);
			}
		});
	};

	const popup = ref(null);

	const open = () => {
		if (popup.value) {
			popup.value.open('bottom');
		}
	};

	const close = () => {
		if (popup.value) {
			popup.value.close(null);
		}
	};

	const choice = (item) => {
		if (popup.value) {
			popup.value.close(null);
		}
		formData.value.idType = item;
	};

	watchEffect(() => {
		console.log(sharedState.value);
		if (sharedState.value == null) {
			title.value = "新建观演人信息";
		} else {
			title.value = "编辑观演人信息";
		}
	});

	onBeforeMount(() => {
		
		uni.getStorage({
			key: 'userLogin',
			success: function(res) {
				formData.value.userId = res.data.id;
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
		
		getSpectatorFromId();
	});
</script>

<style lang="scss" scoped>
	.editspectator-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #f8f8fe;
		color: #333;

		.editspectator-header {
			float: left;
			width: 100%;
			height: 50px;
			display: flex;
			top: 0px;
			position: fixed;
			z-index: 1000;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;

			.title {
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				z-index: 5;
				height: 50px;
			}

			.back-icon {
				z-index: 10;
				position: absolute;
				left: 10px;
			}

			.delete-btn {
				height: 50px;
				z-index: 10;
				line-height: 50px;
				font-size: 16px;
				position: absolute;
				right: 15px;
			}
		}

		.editspectator-content {
			width: 100%;
			height: auto;
			background: #f8f8fe;
			float: left;
			margin-top: 50px;

			.spectator-box {
				width: 100%;
				height: auto;
				float: left;
				background: #fff;

				.spectator-box-content {
					.spectator-item {
						width: 100%;
						height: 50px;
						line-height: 50px;
						float: left;
						padding: 0px 15px;
						box-sizing: border-box;
						border-top: 1px solid #ddd;

						.spectator-text {
							height: 50px;
							width: 70px;
							line-height: 50px;
							font-size: 14px;
							float: left;
						}

						.spectator-item-input {
							width: calc(100% - 100px);
							height: 50px;
							line-height: 50px;
							float: left;
							border: none;
							box-sizing: border-box;
							padding-left: 10px;
							font-size: 14px;

							&::placeholder {
								color: blue;
							}
						}

						.like-input-view {
							width: calc(100% - 100px);
							height: 50px;
							line-height: 50px;
							float: left;
							border: none;
							box-sizing: border-box;
							padding-left: 10px;
							font-size: 14px;
							color: #333;
						}

						.right-icon {
							width: auto;
							height: 50px;
							float: right;

							.arrow-right {
								line-height: 50px;
							}
						}
					}
				}
			}
		}
	}

	.save-btn-box {
		width: 100%;
		height: 80px;
		background: #fff;
		box-sizing: border-box;
		padding: 20px 15px;
		position: fixed;
		bottom: 0px;
		z-index: 50;
		box-shadow: 0px 0px 4px 0px #d3d3d3;

		.save-btn {
			width: 100%;
			height: 40px;
			font-size: 14px;
			background: #ff2d2de2;
			color: #fff;
			border-radius: 4px;
			line-height: 40px;
			text-align: center;
		}
	}

	.id-type-box {
		width: 100%;
		height: 334px;
		background: #fff;
		position: relative;
		bottom: -34px;
		border-top-right-radius: 32px;
		border-top-left-radius: 32px;

		.id-type-title {
			width: 100%;
			height: 80px;
			text-align: center;
			position: relative;

			.id-type-title-text {
				height: 40px;
				line-height: 66px;
				font-size: 18px;
				color: #333;
			}

			.id-type-title-descr {
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				color: #999;
			}

			.id-close {
				position: absolute;
				right: 20px;
				top: 10px;
				height: 40px;

				.id-close-icon {
					line-height: 40px;
				}
			}
		}

		.id-type-list {
			.id-type-item {
				width: 100%;
				height: 55px;
				line-height: 55px;
				text-align: center;

				.id-type-item-name {}
			}
		}
	}

	.id-type-item:active {
		background: #ddd;
	}
</style>